<template>
    <div class="search-history-container">
        <van-cell title="搜索历史">
             <div v-if="isShowDelete">
                <van-icon size="20" @click="showDelate" name="delete-o" />
            </div>
            <div slot="extra" v-else>
                <span @click="deleteAll">全部删除</span>
                &nbsp;
                <span @click="finished">完成</span>
            </div>
        </van-cell>
        <van-cell :title="history" @click="search(history)" v-for="(history,index) in searchHoistories" :key = index>
            <div slot="right-icon">
                <van-icon name="close" v-if="isShowClose" @click="deleteHistory(index)" />
            </div>
        </van-cell>
    </div>
</template>

<script>
import {setItem, getItem,removeItem } from '@/utils/storage'
export default {
    name: 'SearchHistory',
    data() {
        return {
            searchHoistories: [],
            isShowDelete: true,
            isShowClose: false
        };
    },

    mounted() {
        this.searchHoistories = getItem('search-history')
    },

    methods: {
        //防抖函数
        // debounce (callback,delay) {
        //     let timer = null
        //     return function () {
        //         clearTimeout(timer)
        //         timer = setTimeout (() =>{
        //             callback()
        //         },delay)
        //     }
        // },
        // fn (){
        //     console.log('1212');
        // },
        // getHome () {
        //     this.debounce(this.fn,1000)()
        // }
        showDelate () {
            this.isShowDelete = false
            this.isShowClose = true
        },
        finished () {
            this.isShowDelete = true
            this.isShowClose  = false
        },
        //全部删除历史记录
        deleteAll () {
            removeItem ('search-history')
            this.searchHoistories = getItem('search-history')
        },
        deleteHistory (index) {
            const history = getItem('search-history')
            this.searchHoistories.splice(index,1)
            setItem('search-history',this.searchHoistories)
        },
        // 点击历史，触发搜索
        search (history) {
            this.$emit('search', history);
        }
    },
};
</script>

<style lang="less" scoped>

</style>